/*
 * @Description: 新增频道弹窗
 * @Author: Zzt
 * @Date: 2023-02-20 14:43:57
 * @LastEditTime: 2023-02-28 10:08:42
 */
import JPModal from '@/components/JPComponents/JPModal';
import { ICommonDialog } from '@/interfaces/global';
import { Button, Form, Input } from 'antd';
import { useEffect } from 'react';
import { useAnnouncementMgtContext } from '../../contexts/AnnouncementMgtContext';

const AddChannel = (props: ICommonDialog) => {
  const { setChannnel } = useAnnouncementMgtContext();
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [visible]);
  const onCancel = () => {
    onClose();
  };

  const onFinish = (values: any) => {
    // 调用接口扔进去
    console.log('value', values);
    setChannnel(values).then(onClose());
  };

  return (
    <JPModal
      visible={visible}
      onCancel={onCancel}
      title="新建频道"
      draggable={true}
      footer={[
        <Button key={'cancel'} onClick={onCancel}>
          取消
        </Button>,
        <Button key={'save'} type="primary" onClick={() => form.submit()}>
          保存
        </Button>
      ]}
    >
      <Form form={form} onFinish={onFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        <Form.Item name={'name'} rules={[{ required: true }]} label="频道标题">
          <Input placeholder="请填写频道标题" />
        </Form.Item>
        <Form.Item name={'remark'} label="备注说明">
          <Input placeholder="请填写备注" />
        </Form.Item>
        <Form.Item></Form.Item>
      </Form>
    </JPModal>
  );
};
export default AddChannel;
